<template>
	<view>
		<u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :length="width"
		 :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
			<view class="u-model">
				<view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
				<view class="u-model__content">
					<view :style="[contentStyle]" v-if="$slots.default  || $slots.$default">
						<slot />
					</view>
					<view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
				</view>
				<view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
					<view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button"
					 :style="[cancelBtnStyle]" @tap="cancel">
						{{cancelText}}
					</view>
					<view v-if="showConfirmButton || $slots['confirm-button']" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
					 class="u-model__footer__button hairline-left" :style="[confirmBtnStyle]" @tap="confirm">
						<slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
						<block v-else>
							<u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
							<block v-else>
								{{confirmText}}
							</block>
						</block>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	
	export default {
		name: 'u-modal',
		props: {
			
			value: {
				type: Boolean,
				default: false
			},
			
			zIndex: {
				type: [Number, String],
				default: ''
			},
			
			title: {
				type: [String],
				default: '提示'
			},
			
			width: {
				type: [Number, String],
				default: 600
			},
			
			content: {
				type: String,
				default: '内容'
			},
			
			showTitle: {
				type: Boolean,
				default: true
			},
			
			showConfirmButton: {
				type: Boolean,
				default: true
			},
			
			showCancelButton: {
				type: Boolean,
				default: false
			},
			
			confirmText: {
				type: String,
				default: '确认'
			},
			
			cancelText: {
				type: String,
				default: '取消'
			},
			
			confirmColor: {
				type: String,
				default: '#2979ff'
			},
			
			cancelColor: {
				type: String,
				default: '#606266'
			},
			
			borderRadius: {
				type: [Number, String],
				default: 16
			},
			
			titleStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			
			contentStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			
			cancelStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			
			confirmStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			
			zoom: {
				type: Boolean,
				default: true
			},
			
			asyncClose: {
				type: Boolean,
				default: false
			},
			
			maskCloseAble: {
				type: Boolean,
				default: false
			},
			
			negativeTop: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				loading: false, 
			}
		},
		computed: {
			cancelBtnStyle() {
				return Object.assign({
					color: this.cancelColor
				}, this.cancelStyle);
			},
			confirmBtnStyle() {
				return Object.assign({
					color: this.confirmColor
				}, this.confirmStyle);
			},
			uZIndex() {
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
		watch: {
			
			
			value(n) {
				if (n === true) this.loading = false;
			}
		},
		methods: {
			confirm() {
				
				if (this.asyncClose) {
					this.loading = true;
				} else {
					this.$emit('input', false);
				}
				this.$emit('confirm');
			},
			cancel() {
				this.$emit('cancel');
				this.$emit('input', false);
				
				
				setTimeout(() => {
					this.loading = false;
				}, 300);
			},
			
			popupClose() {
				this.$emit('input', false);
			},
			
			clearLoading() {
				this.loading = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.u-model {
		height: auto;
		overflow: hidden;
		font-size: 32rpx;
		background-color: #fff;

		&__btn--hover {
			background-color: rgb(230, 230, 230);
		}

		&__title {
			padding-top: 48rpx;
			font-weight: 500;
			text-align: center;
			color: $u-main-color;
		}

		&__content {
			&__message {
				padding: 48rpx;
				font-size: 30rpx;
				text-align: center;
				color: $u-content-color;
			}
		}

		&__footer {
			@include vue-flex;

			&__button {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				box-sizing: border-box;
				cursor: pointer;
				text-align: center;
				border-radius: 4rpx;
			}
		}
	}
</style>
